(function($) {
    $.fn.location_reports_map = function() {
        var url_img_wait = '/images/wait.gif';
        var url_img_refresh = '/images/refresh.png';
        var container_id = $(this).attr('id');

        function make_map(id, places) {
            var options = {
                zoom: 3,
                center: new google.maps.LatLng(47.379, 8.541),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                scaleControl: true
            };

            var map = new google.maps.Map(document.getElementById(id), options);
            var bounds = new google.maps.LatLngBounds();

            var infowindow;
            var markers = [];

            for (var i = 0; i < places.length; i++) {
                var infocontent = '<div class="title_map_window">Location Report</div>'
                    +'<div class="map_window_line">'
                    +'<div class="left">Coordinates</div><div class="right">'
                    +places[i].latitude+' / '+places[i].longitude+'</div>'
                    +'</div>'
                    +'<div class="map_window_line">'
                    +'<div class="left">Accuracy</div><div class="right">'+places[i].accuracy+'m</div>'
                    +'</div>'
                    +'<div class="map_window_line">'
                    +'<div class="left">Provider</div><div class="right">'+places[i].provider+'</div>'
                    +'</div>'
                    +'<div class="map_window_line">'
                    +'<div class="left">Timestamp</div><div class="right">'+places[i].timestamp+'</div>'
                    +'</div>'

                markers[i] = new google.maps.Marker({
                    position: new google.maps.LatLng(places[i].latitude, places[i].longitude),
                    map: map,
                    title: places[i].timestamp,
                    infocontent: infocontent
                });

                (function(marker) {
                    google.maps.event.addListener(marker, 'click', function() {
                        if (!infowindow) {
                            infowindow = new google.maps.InfoWindow();
                        }
                        infowindow.setContent(marker.infocontent);
                        infowindow.open(map, marker);
                    });
                })(markers[i]);

                bounds.extend(markers[i].position);
            }

            map.fitBounds(bounds)

            google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
                var clusterer_options = {
                    gridSize: 50,
                    imagePath: 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m'
                };
                var markerclusterer = new MarkerClusterer(map, markers, clusterer_options);
            });
        }

        function parse_ajax_response(data) {
            $('div#map', '#'+container_id).remove();

            if (data.length > 0) {
                $('#'+container_id).append('<div id="map"></div>');
                $('div#map', '#'+container_id).height(400);
                make_map('map', data);
            }
            else {
                $('#'+container_id).append('<div id="map" class="text_content">No location reports stored on server.</div>');
            }
        }

        $(this).html(
            '<div class="dashboard_subtitle">'
                +'Location Reports'
                +'</div>'
                +'<div id="map" class="text_content">'
                +'<img src="'+url_img_wait+'" class="img_wait" />'
                +'</div>'
        );

        $.getJSON('/ajax/location_reports/get', function(data) {
            $('div.dashboard_subtitle', '#'+container_id).prepend(
                '<div class="div_refresh">'
                    +'<img src="'+url_img_refresh+'" class="img_refresh" />'
                    +'</div>'
            );

            $('img.img_refresh', 'div.dashboard_subtitle', '#'+container_id).click(function() {
                if ($(this).attr('src') == url_img_refresh) {
                    $(this).attr('src', url_img_wait);

                    $.getJSON('/ajax/location_reports/get', function(data) {
                        $('.img_refresh', '#'+container_id).attr('src', url_img_refresh);
                        parse_ajax_response(data);
                    });
                }
            });

            parse_ajax_response(data);
        });
    };
})(jQuery);